<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<html>
<head>
	<title>选座 - 猫眼电影 - 一网打尽好电影</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta http-equiv="cleartype" content="yes" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />

	<meta name="HandheldFriendly" content="true" />
	<meta name="format-detection" content="email=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script>"use strict";!function(){var i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"_Owl_",n=window;n[i]||(n[i]={isRunning:!1,isReady:!1,preTasks:[],dataSet:[],use:function(i,t){this.isReady&&n.Owl&&n.Owl[i](t),this.preTasks.push({api:i,data:[t]})},add:function(i){this.dataSet.push(i)},run:function(){var t=this;if(!this.isRunning){this.isRunning=!0;var i=n.onerror;n.onerror=function(){this.isReady||this.add({type:"jsError",data:arguments}),i&&i.apply(n,arguments)}.bind(this),(n.addEventListener||n.attachEvent)("error",function(i){t.isReady||t.add({type:"resError",data:[i]})},!0)}}},n[i].run())}();</script>
	<script>
        cid = "c_2yzd0xp5";
        ci = 112;
        window.system = {"user":{"id":339665704,"token":"q0h9fiqLD98ncB1swQAaYlYn-V4AAAAAkQgAAKcoUiZ4l5JoaajwI-JfWjnO4swJVGTYnL8hiWwGo2HmYF214sBI1nQ5rrE8ab1LtA","username":"炸毛之王","profile":{"age":"20","authInfo":"","avatarType":255,"avatarurl":"https://img.meituan.net/avatar/dbd8da2276e9d2693668f27e42e4ae6d67763.jpg","birthday":926956800000,"currentExp":285,"gender":2,"id":339665704,"interest":"摄影,动漫,游戏","juryLevel":0,"maoyanAge":"3","marriage":"热恋中","nextTitle":"","nickName":"炸毛之王","nickNameStatus":0,"occupation":"IT","registerTime":1460298617000,"roleType":0,"signature":"","signatureStatus":0,"ticketCount":13,"title":"白银会员","tmpNickName":"","tmpSignature":"","topicCount":0,"totalExp":500,"uid":1282244662,"userLevel":2,"userNextLevel":3,"username":"炸毛之王","vipInfo":"","vipType":0,"visitorCount":2}},"uid":339665704,"seatsPrice":{"1":{"expression":"38X1","price":"38"},"2":{"expression":"38X2","price":"76"},"3":{"expression":"38X3","price":"114"},"4":{"expression":"38X4","price":"152"},"5":{"expression":"38X5","price":"190"},"6":{"expression":"38X6","price":"228"}},"remind":"","uuid":"616CC29076FA11E9A3DAA35C11D7F2C1E89FA1C56B4C4BB4A25AB182208E380C","cinemaId":8932};

        window.openPlatform = '';
        window.openPlatformSub = '';
        window.$mtsiFlag = '0';

	</script>
	<link rel="stylesheet" href="${root}/css/common.css"/>
	<link rel="stylesheet" href="${root}/css/cinemas-seat.css"/>
	<script crossorigin="anonymous" src="${root}/js/stat.js"></script>
	<script>if(window.devicePixelRatio >= 2) { document.write('<link rel="stylesheet" href="${root}/css/seats/image-2x.css"/>') }</script>
	<style>
		@font-face {
			font-family: stonefont;
			src: url('//vfile.meituan.net/colorstone/af3cb229ae175776d392c8d8e1a9ba113168.eot');
			src: url('//vfile.meituan.net/colorstone/af3cb229ae175776d392c8d8e1a9ba113168.eot?#iefix') format('embedded-opentype'),
			url('//vfile.meituan.net/colorstone/0ec71fdce00dc63d637f986207e0c5e92076.woff') format('woff');
		}

		.stonefont {
			font-family: stonefont;
		}
	</style>
</head>
<body>


<%@ include file="head.jsp" %>

<div class="container" id="app" class="page-cinemas/seat" >
	<div class="order-progress-bar">
		<div class="step first done">
			<span class="step-num">1</span>
			<div class="bar"></div>
			<span class="step-text">选择影片场次</span>
		</div>
		<div class="step done">
			<span class="step-num">2</span>
			<div class="bar"></div>
			<span class="step-text">选择座位</span>
		</div>
		<div class="step ">
			<span class="step-num">3</span>
			<div class="bar"></div>
			<span class="step-text">14分钟内付款</span>
		</div>
		<div class="step last ">
			<span class="step-num">4</span>
			<div class="bar"></div>
			<span class="step-text">影院取票观影</span>
		</div>
	</div>


	<div class="main clearfix">
		<div class="hall">
			<div class="seat-example">
				<div class="selectable-example example">
					<span>可选座位</span>
				</div>
				<div class="sold-example example">
					<span>已售座位</span>
				</div>
				<div class="selected-example example">
					<span>已选座位</span>
				</div>
				<div class="couple-example example">
					<span>情侣座位</span>
				</div>
			</div>


			<div class="seats-block" data-cols="9" data-section-id="13415" data-section-name="默认场区" data-seq-no="201906110241054">
				<div class="row-id-container">
					<span class="row-id">1</span>
					<span class="row-id">2</span>
					<span class="row-id">3</span>
					<span class="row-id">4</span>
					<span class="row-id">5</span>
					<span class="row-id">6</span>
					<span class="row-id">7</span>
				</div>

				<div class="seats-container">
					<div class="screen-container">
						<div class="screen">银幕中央</div>
						<div class="c-screen-line"></div>
					</div>

					<div class="seats-wrapper">
						<div class="row">
            <span class="seat selectable"
				  data-column-id="9"
				  data-row-id="1"
				  data-no="000000013415-1-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="8"
								  data-row-id="1"
								  data-no="000000013415-1-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="7"
								  data-row-id="1"
								  data-no="000000013415-1-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="1"
								  data-no="000000013415-1-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="1"
								  data-no="000000013415-1-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="1"
								  data-no="000000013415-1-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="1"
								  data-no="000000013415-1-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="1"
								  data-no="000000013415-1-8"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="1"
								  data-no="000000013415-1-9"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat selectable"
				  data-column-id="9"
				  data-row-id="2"
				  data-no="000000013415-2-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="8"
								  data-row-id="2"
								  data-no="000000013415-2-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="7"
								  data-row-id="2"
								  data-no="000000013415-2-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="2"
								  data-no="000000013415-2-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="2"
								  data-no="000000013415-2-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="2"
								  data-no="000000013415-2-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="2"
								  data-no="000000013415-2-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="2"
								  data-no="000000013415-2-8"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="2"
								  data-no="000000013415-2-9"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat selectable"
				  data-column-id="9"
				  data-row-id="3"
				  data-no="000000013415-3-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="8"
								  data-row-id="3"
								  data-no="000000013415-3-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="7"
								  data-row-id="3"
								  data-no="000000013415-3-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="3"
								  data-no="000000013415-3-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="3"
								  data-no="000000013415-3-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="3"
								  data-no="000000013415-3-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="3"
								  data-no="000000013415-3-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="3"
								  data-no="000000013415-3-8"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="3"
								  data-no="000000013415-3-9"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat selectable"
				  data-column-id="7"
				  data-row-id="4"
				  data-no="000000013415-4-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="4"
								  data-no="000000013415-4-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="4"
								  data-no="000000013415-4-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="4"
								  data-no="000000013415-4-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="4"
								  data-no="000000013415-4-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="4"
								  data-no="000000013415-4-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="4"
								  data-no="000000013415-4-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="4"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="4"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat selectable"
				  data-column-id="7"
				  data-row-id="5"
				  data-no="000000013415-5-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="5"
								  data-no="000000013415-5-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="5"
								  data-no="000000013415-5-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="5"
								  data-no="000000013415-5-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="5"
								  data-no="000000013415-5-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="5"
								  data-no="000000013415-5-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="5"
								  data-no="000000013415-5-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="5"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="5"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat selectable"
				  data-column-id="7"
				  data-row-id="6"
				  data-no="000000013415-6-1"
				  data-st="N"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat selectable"
								  data-column-id="6"
								  data-row-id="6"
								  data-no="000000013415-6-2"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="5"
								  data-row-id="6"
								  data-no="000000013415-6-3"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="4"
								  data-row-id="6"
								  data-no="000000013415-6-4"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="3"
								  data-row-id="6"
								  data-no="000000013415-6-5"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="2"
								  data-row-id="6"
								  data-no="000000013415-6-6"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat selectable"
								  data-column-id="1"
								  data-row-id="6"
								  data-no="000000013415-6-7"
								  data-st="N"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="6"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="6"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
						<div class="row">
            <span class="seat lover lover-left selectable"
				  data-column-id="8"
				  data-row-id="7"
				  data-no="000000013415-7-1"
				  data-st="L"
				  data-act="seat-click"
				  data-bid="b_s7eiiijf"
			></span>
							<span class="seat lover lover-right selectable"
								  data-column-id="7"
								  data-row-id="7"
								  data-no="000000013415-7-2"
								  data-st="R"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-left selectable"
								  data-column-id="6"
								  data-row-id="7"
								  data-no="000000013415-7-3"
								  data-st="L"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-right selectable"
								  data-column-id="5"
								  data-row-id="7"
								  data-no="000000013415-7-4"
								  data-st="R"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-left selectable"
								  data-column-id="4"
								  data-row-id="7"
								  data-no="000000013415-7-5"
								  data-st="L"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-right selectable"
								  data-column-id="3"
								  data-row-id="7"
								  data-no="000000013415-7-6"
								  data-st="R"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-left selectable"
								  data-column-id="2"
								  data-row-id="7"
								  data-no="000000013415-7-7"
								  data-st="L"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat lover lover-right selectable"
								  data-column-id="1"
								  data-row-id="7"
								  data-no="000000013415-7-8"
								  data-st="R"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
							<span class="seat empty"
								  data-column-id=""
								  data-row-id="7"
								  data-no=""
								  data-st="E"
								  data-act="seat-click"
								  data-bid="b_s7eiiijf"
							></span>
						</div>
					</div>
				</div>

			</div>

		</div>

		<div class="side">
			<div class="movie-info clearfix">
				<div class="poster">
					<img src="${movie.image}">
				</div>
				<div class="content">
					<p class="name text-ellipsis">${movie.name}</p>
					<div class="info-item">
						<span>类型 :</span>
						<span class="value">爱情,青春</span>
					</div>
					<div class="info-item">
						<span>时长 :</span>
						<span class="value">${movie.duration}分钟</span>
					</div>
				</div>
			</div>

			<div class="show-info">
				<div class="info-item">
					<span>影院 :</span>
					<span class="value text-ellipsis">至潮影城（学院路人才大厦店）</span>
				</div>
				<div class="info-item">
					<span>影厅 :</span>
					<span class="value text-ellipsis">贵宾7号厅（全部沙发躺着看）</span>
				</div>
				<div class="info-item">
					<span>版本 :</span>
					<span class="value text-ellipsis">国语2D</span>
				</div>
				<div class="info-item">
					<span>场次 :</span>
					<span class="value text-ellipsis screen">今天 6月11 22:15</span>
				</div>
				<div class="info-item">
					<span>票价 :</span>
					<span class="value text-ellipsis">￥${movie.price}/张</span>
				</div>
			</div>
			<div class="ticket-info">
				<div class="no-ticket">
					<p class="buy-limit">座位：一次最多选6个座位</p>
					<p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
				</div>
				<div class="has-ticket" style="display:none">
					<span class="text">座位：</span>
					<div class="ticket-container" data-limit="6"></div>
				</div>

				<div class="total-price">
					<span>总价 :</span>
					<span class="price">0</span>
				</div>
			</div>

			<div class="confirm-order">
				<div class="cellphone">
					<span>手机号 :</span>
					<span class="phone-num">137****9702</span>
				</div>
				<div class="confirm-btn disable" data-act="confirm-click" data-bid="b_0a0ep6pp" href="${root}/order/createOrder?movie_id=${movie.id}">确认选座</div>
				<%--<a href="${root}/order/createOrder?movie_id=${movie.id}">确认选座</a>--%>
			</div>
		</div>
	</div>
	<div class="modal-container" style="display:none">
		<div class="modal">
			<span class="icon"></span>

			<p class="tip"></p>

			<div class="ok-btn btn">我知道了</div>
		</div>
	</div>

	<script src="${root}/js/index.min.js"></script>
</div>

<%@ include file="footer.jsp" %>
<script crossorigin="anonymous" src="${root}/js/cinemas-seat.js"></script>
</body>
</html>
